<template>
  <div class="app-container">
    <el-form :inline="true" :model="formParams" v-show="showSearch" class="demo-form-inline">
      <el-form-item label="交易编号">
        <el-input
          v-model.trim="formParams.transactionId"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input
          v-model.trim="formParams.enterpriseName"
          clearable
          placeholder="请输入"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="交易类型" prop="type">
        <ApiSelect v-model="formParams.type" :options="transaction_type" />
      </el-form-item>
      <el-form-item label="选择日期" prop="_date">
        <el-date-picker
          value-format="x"
          v-model="formParams._date"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button @click="handleReset()">重置</el-button>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" justify="end">
      <el-button v-hasPermi="['fund:enterprise:export']" type="primary" @click="handleExport()"
        >批量导出筛选数据</el-button
      >
    </el-row>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="交易编号" align="center" prop="transactionId" />
      <el-table-column label="企业名称" align="center" prop="enterpriseName" />
      <el-table-column label="联系方式" align="center" prop="contactsMobile" />
      <el-table-column label="交易类型" align="center" prop="type" />
      <el-table-column label="金额" align="center" prop="money" />
      <el-table-column label="交易时间" align="center" prop="payTime" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="formParams.pageNum"
      v-model:limit="formParams.pageSize"
      @pagination="getList()"
    />
  </div>
</template>
<script setup>
import { getEnterpriseUserDetailsListApi } from '@/api/fund/enterprise'
import { useOrganApiConfig } from '@/hooks/service'

const selectState = useOrganApiConfig()
const { proxy } = getCurrentInstance()
const { transaction_type } = proxy.useDict('transaction_type')

const loading = ref(false)
const showSearch = ref(true)
const list = ref([])
const total = ref(0)
const formParams = ref({
  pageNum: 1,
  pageSize: 10,
  startTime: null,
  endTime: null,
  transactionId: null,
  enterpriseName: null,
  type: null,
  _date: null
})
function handleReset() {
  formParams.value = {
    pageNum: 1,
    pageSize: 10,
    startTime: null,
    endTime: null,
    transactionId: null,
    enterpriseName: null,
    type: null,
    _date: null
  }
  getList()
}
function handleQuery() {
  formParams.value.pageNum = 1
  getList()
}
function handleExport() {
  const param = {
    enterpriseName: formParams.value.enterpriseName,
    transactionId: formParams.value.transactionId,
    type: formParams.value.type ? Number(formParams.value.type) : formParams.value.type,
    startTime: formParams.value._date?.length ? formParams.value._date[0] : null,
    endTime: formParams.value._date?.length ? formParams.value._date[1] : null
  }
  proxy.download(
    '/group/enterpriseUserCapital/derive/enterpriseCapital',
    { ...param },
    `企业用户明细${new Date().getTime()}.xlsx`
  )
}
function getList() {
  if (formParams.value._date?.length && formParams.value._date[0] === formParams.value._date[1]) {
    formParams.value._date[1] = formParams.value._date[1] + 86399000
  }
  const params = {
    ...formParams.value,
    startTime: formParams.value._date?.length ? formParams.value._date[0] : null,
    endTime: formParams.value._date?.length ? formParams.value._date[1] : null,
    _date: null
  }
  loading.value = true
  getEnterpriseUserDetailsListApi(params)
    .then((res) => {
      console.log(transaction_type.value)
      total.value = res.data.total
      list.value = res.data.rows.map((item) => {
        return {
          ...item,
          money: '￥' + item.money,
          type: transaction_type.value.find((ev) => ev?.value == item.type)?.label
        }
      })
    })
    .finally(() => {
      loading.value = false
    })
}
getList()
</script>
<style lang="scss" scoped>
.el-input {
  width: 215px;
}
</style>
